গ্রাফ একটি গাণিতিক কাঠামো যা নোড (Node) বা ভেরটেক্স (Vertex) এবং তাদের মধ্যে সম্পর্ক বা সংযোগ (Edge) দিয়ে গঠিত। ওয়েব ডেভেলপমেন্টে গ্রাফ ব্যবহার করা হয় ডাটা ভিজ্যুয়ালাইজেশন, নেটওয়ার্ক এনালাইসিস, রাস্তাঘাটের মানচিত্র, সোশ্যাল মিডিয়া কনটেন্ট এবং অন্যান্য বিভিন্ন ধরনের সম্পর্ক বিশ্লেষণ করতে।
জাভাস্ক্রিপ্টে গ্রাফ তৈরি করার জন্য, বিভিন্ন গ্রাফ ডেটা স্ট্রাকচার এবং গ্রাফ অ্যালগরিদম (যেমন DFS, BFS) ব্যবহার করা হয়। গ্রাফের উপাদানগুলো (নোড ও এজ) মানচিত্রের মাধ্যমে বা অ্যারে ব্যবহার করে সংরক্ষণ করা হয়।
গ্রাফ তৈরি করার জন্য সাধারণত দুটি প্রধান ডেটা স্ট্রাকচার ব্যবহার করা হয়:
এটি একটি এমন ডেটা স্ট্রাকচার, যেখানে প্রতিটি নোডের জন্য একটি তালিকা থাকে, যা তার সংযুক্ত নোডগুলিকে নির্দেশ করে। এটি সাধারণত কম জায়গা নেয় এবং গ্রাফের স্পার্স (Sparse) প্রকারের জন্য উপযুক্ত।
let graph = {
A: ['B', 'C'],
B: ['A', 'D', 'E'],
C: ['A', 'F'],
D: ['B'],
E: ['B', 'F'],
F: ['C', 'E']
};
এটি একটি 2D অ্যারে, যেখানে প্রতিটি সারি এবং কলাম একটি নোডের প্রতিনিধিত্ব করে। যদি দুটি নোডের মধ্যে সংযোগ থাকে, তাহলে ওই পজিশনে 1 থাকে, না থাকলে 0 থাকে। এটি কম্প্যাক্ট কিন্তু গ্রাফের ঘনত্ব (Dense Graph) বেশি থাকলে আরও বেশি জায়গা নেয়।
let graph = [
[0, 1, 1, 0, 0, 0], // A
[1, 0, 0, 1, 1, 0], // B
[1, 0, 0, 0, 0, 1], // C
[0, 1, 0, 0, 0, 0], // D
[0, 1, 0, 0, 0, 1], // E
[0, 0, 1, 0, 1, 0] // F
];
গ্রাফে নোডের মধ্যে সংযোগ (এজ) স্থাপন করতে জাভাস্ক্রিপ্টের অ্যারে বা অবজেক্ট ব্যবহার করা হয়। এই সংযোগগুলিকে দুটি নোডের মধ্যে সম্পর্ক হিসেবে দেখা হয়।
let graph = {
A: ['B'],
B: ['A', 'C'],
C: ['B']
};
// A থেকে D পর্যন্ত একটি নতুন সংযোগ যোগ করা
graph.A.push('D');
graph.D = ['A']; // নতুন নোড D
console.log(graph);
// B থেকে C পর্যন্ত সংযোগ মুছে ফেলা
let index = graph.B.indexOf('C');
if (index > -1) {
graph.B.splice(index, 1); // C মুছে দেওয়া
}
console.log(graph);
গ্রাফের traversal হল গ্রাফের সমস্ত নোড এবং এজ পরিদর্শন করা। গ্রাফ ট্রাভার্সালের দুটি প্রধান পদ্ধতি রয়েছে:
DFS হল একটি ট্রাভার্সাল পদ্ধতি যেখানে একটি নোড থেকে শুরু করে যতক্ষণ না সমস্ত সম্পর্কিত নোড পরিদর্শন করা হয়, ততক্ষণ পর্যন্ত গভীরতা অনুসরণ করা হয়।
function dfs(graph, start, visited = {}) {
if (!start) return;
visited[start] = true;
console.log(start);
graph[start].forEach(neighbor => {
if (!visited[neighbor]) {
dfs(graph, neighbor, visited);
}
});
}
let graph = {
A: ['B', 'C'],
B: ['A', 'D', 'E'],
C: ['A', 'F'],
D: ['B'],
E: ['B', 'F'],
F: ['C', 'E']
};
dfs(graph, 'A');
BFS একটি ট্রাভার্সাল পদ্ধতি যেখানে প্রথমে একটি নোড পরিদর্শন করা হয় এবং তার পরবর্তী স্তরের সমস্ত নোড পরিদর্শন করা হয়।
function bfs(graph, start) {
let queue = [start];
let visited = {};
visited[start] = true;
while (queue.length) {
let node = queue.shift();
console.log(node);
graph[node].forEach(neighbor => {
if (!visited[neighbor]) {
visited[neighbor] = true;
queue.push(neighbor);
}
});
}
}
let graph = {
A: ['B', 'C'],
B: ['A', 'D', 'E'],
C: ['A', 'F'],
D: ['B'],
E: ['B', 'F'],
F: ['C', 'E']
};
bfs(graph, 'A');
গ্রাফে বিভিন্ন অ্যালগরিদম প্রয়োগ করা হয় যেমন:
জাভাস্ক্রিপ্টে গ্রাফ ভিজ্যুয়ালাইজ করার জন্য বিভিন্ন লাইব্রেরি ব্যবহৃত হয়, যেমন:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@9.1.2/dist/vis-network.min.js"></script>
<style>
#graph { width: 500px; height: 500px; border: 1px solid lightgray; }
</style>
</head>
<body>
<div id="graph"></div>
<script>
var nodes = new vis.DataSet([
{ id: 1, label: 'A' },
{ id: 2, label: 'B' },
{ id: 3, label: 'C' },
{ id: 4, label: 'D' },
{ id: 5, label: 'E' }
]);
var edges = new vis.DataSet([
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
var container = document.getElementById('graph');
var data = { nodes: nodes, edges: edges };
var options = { };
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
জাভাস্ক্রিপ্ট গ্রাফ ডেটা স্ট্রাকচার এবং ট্রাভার্সাল অ্যালগরিদমগুলো ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা রাখে। গ্রাফের বিভিন্ন ধরনের ডেটা স্ট্রাকচার (অ্যাডজেসেন্সি লিস্ট, অ্যাডজেসেন্সি ম্যাট্রিক্স) ব্যবহার করে নোড এবং এজ সংযোগ করা যায়। DFS এবং BFS মত অ্যালগরিদম দ্বারা গ্রাফ ট্রাভার্সাল করা হয়। এছাড়া, গ্রাফের ভিজ্যুয়ালাইজেশন করতে D3.js, Cytoscape.js এবং Vis.js মতো লাইব্রেরি ব্যবহার করা যায়। জাভাস্ক্রিপ্টে গ্রাফ ব্যবহার করে আপনি ডাটা সম্পর্ক বিশ্লেষণ করতে পারেন, যা ওয়েব অ্যাপ্লিকেশন এবং অন্যান্য ডেটা প্রসেসিং কাজে কার্যকরী।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
